<template>
  <div class="page">

    <!-- 业务总览 开始 -->
    <div class="top_info">
      <div class="left_box">
        <div class="title">
          <span>业务总览</span>
          <span class="time">{{updateTime}}</span>
        </div>
        <div class="cell_list">
          <div class="cell">
            <div class="h1">客户数</div>
            <div class="h2">{{ overViewInfo[0]?overViewInfo[0].customerCnt:'' }}</div>
            <div class="h3">上月：{{ overViewInfo[1]?overViewInfo[1].customerCnt:'' }}</div>
          </div>
          <div class="cell">
            <div class="h1">预约客户数</div>
            <div class="h2">{{ overViewInfo[0]?overViewInfo[0].appointmentCnt:'' }}</div>
            <div class="h3">上月：{{ overViewInfo[1]?overViewInfo[1].appointmentCnt:'' }}</div>
          </div>
          <div class="cell">
            <div class="h1">成交客户数</div>
            <div class="h2">{{ overViewInfo[0]?overViewInfo[0].dealCnt:'' }}</div>
            <div class="h3">上月：{{ overViewInfo[1]?overViewInfo[1].dealCnt:'' }}</div>
          </div>
          <div class="cell">
            <div class="h1">合作机构</div>
            <div class="h2">{{ overViewInfo[0]?overViewInfo[0].bizOrgCnt:'' }}</div>
            <div class="h3">上月：{{ overViewInfo[1]?overViewInfo[1].bizOrgCnt:'' }}</div>
          </div>
          <div class="cell">
            <div class="h1">开展业务城市数</div>
            <div class="h2">{{ overViewInfo[0]?overViewInfo[0].bizCityCnt :''}}</div>
            <div class="h3">上月：{{ overViewInfo[1]?overViewInfo[1].bizCityCnt:'' }}</div>
          </div>
        </div>
      </div>
      <!-- <div class="right_box">
        <img src="@/assets/images/chart_01.png" alt="">
      </div> -->
    </div>
    <!-- 业务总览 end -->

    <!-- 成交情况、成交客单价分布 开始 -->
    <div class="row_box">
      <div class="row_left">
        <div class="head">
          <span class="name">成交情况</span>
          <div class="filter_box">
            <el-date-picker v-model="dealForm.month" size="mini" type="month" placeholder="选择月" class="a_input" value-format="yyyy-MM" @change="getDealInfo">
            </el-date-picker>
            <el-select size="mini" v-model="dealForm.city" filterable class="a_select" @change="getDealInfo">
              <el-option v-for="(item,index) in cityList" :key="index" :label="item.name" :value="item.code"></el-option>
            </el-select>
          </div>
        </div>

        <!-- 图表区域 开始 -->
        <div class="chart_box">
          <div class="chart" id="dealChart"></div>
        </div>
        <!-- 图表区域 end -->

      </div>
      <div class="row_right">
        
        <div class="head">
          <span class="name">客户数据</span>
          <div class="filter_box">
            <el-date-picker v-model="userForm.month" size="mini" type="month" placeholder="选择月" class="a_input" value-format="yyyy-MM" @change="getCustomerInfo">
            </el-date-picker>
            <el-select size="mini" v-model="userForm.city" filterable class="a_select" @change="getCustomerInfo">
              <el-option v-for="(item,index) in cityList" :key="index" :label="item.name" :value="item.code"></el-option>
            </el-select>
          </div>
        </div>

        <!-- 图表区域 开始 -->
        <div class="chart_box">
          <div class="chart" id="customerInfoChart"></div>
        </div>
        <!-- 图表区域 end -->
      </div>
    </div>
    <!-- 成交情况、成交客单价分布 开始 -->

    <!-- 饼图列表 开始 -->
    <div class="pie_list">

      <!-- 成交客单价分布 开始 -->
      <div class="pie_box">
        <div class="head"><span class="name">成交客单价分布</span></div>
        <div class="pie_chart" id="dealPie"></div>
      </div>
      <!-- 成交客单价分布 end -->

      <!-- 成交项目分布 开始 -->
      <div class="pie_box">
        <div class="head"><span class="name">成交项目分布</span></div>
        <div class="pie_chart" id="dealProjectPie"></div>
      </div>
      <!-- 成交项目分布 end -->

      <!-- 成交客户年龄分布 开始 -->
      <div class="pie_box">
        <div class="head"><span class="name">成交客户年龄分布</span></div>
        <div class="pie_chart" id="dealCustomerAge"></div>
      </div>
      <!-- 成交客户年龄分布 end -->

      <!-- 成交客户性别分布 开始 -->
      <div class="pie_box">
        <div class="head"><span class="name">成交客户性别分布</span></div>
        <div class="pie_chart" id="dealCustomerSex"></div>
      </div>
      <!-- 成交客户性别分布 end -->


    </div>
    <!-- 饼图列表 开始 -->

    <!-- 转化率情况、成交项目分布 开始 -->
    <div class="row_box">
      <div class="row_left">
        <div class="head">
          <span class="name">转化率情况</span>
          <div class="filter_box">
            <el-date-picker v-model="rateForm.month" size="mini" type="month" placeholder="选择月" class="a_input" value-format="yyyy-MM" @change="getConversion">
            </el-date-picker>
            <el-select size="mini" v-model="rateForm.city" filterable class="a_select" @change="getConversion">
              <el-option v-for="(item,index) in cityList" :key="index" :label="item.name" :value="item.code"></el-option>
            </el-select>
          </div>
        </div>

        <!-- 图表区域 开始 -->
        <div class="chart_box">
          <div class="chart" id="conversionChart"></div>
        </div>
        <!-- 图表区域 end -->

      </div>
      <div class="row_right">
        <div class="head">
          <span class="name">单个线索产值</span>
          <div class="filter_box">
            <el-date-picker v-model="clueForm.month" size="mini" type="month" placeholder="选择月" class="a_input" value-format="yyyy-MM" @change="getSingleClue">
            </el-date-picker>
            <el-select size="mini" v-model="clueForm.city" filterable class="a_select" @change="getSingleClue">
              <el-option v-for="(item,index) in cityList" :key="index" :label="item.name" :value="item.code"></el-option>
            </el-select>
          </div>
        </div>

        <!-- 图表区域 开始 -->
        <div class="chart_box">
          <div class="chart" id="singleClueChart"></div>
        </div>
        <!-- 图表区域 end -->
      </div>
    </div>
    <!-- 转化率情况、成交项目分布 开始 -->


  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  GETBUSINESSOVERVIEW,
  GETBUSINESSDEALCHART,
  GETUNITPRICEDISTRIBUTION,
  GETCITYOPTIONS,
  GETBUSINESSCONVERSION,
  GETDEALPROJECTDISTRIBUTION,
  GETSINGLECLUEOUTPUTVALUE,
  GETCUSTOMERAGEDISTRIBUTION,
  GETCUSTOMERDATA,
  GETCUSTOMERGENDERDISTRIBUTION,
} from "@/http/system";
import { deepClone } from "@/common/util";
import { ECHARTCOLOR } from "@/common/constants";
import moment from 'moment'
export default {
  data() {
    return {
      updateTime:moment().format('yyyy-MM-DD hh:mm:ss'),
      dealTime: "",
      dealCity: "",
      chartColor: ECHARTCOLOR,
      overViewInfo: [],
      cityList: [],
      dealForm: {},
      rateForm: {},
      clueForm: {},
      userForm:{},
    };
  },
  mounted() {
    this.getCity();
    this.getOverview();
    this.getDealInfo();
    this.getDealPrice();
    this.getConversion();

    this.getDealProject();

    this.getSingleClue();
    this.getCustomerAge();

    this.getCustomerInfo();
    this.getCustomerSex();

    //this.initDealPriceChart();
    //this.initDealRateChart();
    //this.initDealProjectChart();
  },
  methods: {
    // 生成图表
    initChart(id, options) {
      var chartDom = document.getElementById(id);
      var myChart = echarts.init(chartDom);
      myChart.setOption(options);
    },

    // 生成折线图、柱状图图表
    initDealChart(oParams, id) {
      let option = {
        tooltip: {
          trigger: "axis",
          formatter:oParams.formatter || ''
        },
        legend: {
          right: "16px",
          data: oParams.legend,
        },
        grid: {
          left: "16",
          right: "26",
          bottom: "16",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: oParams.boundaryGap,
            data: oParams.xaxis,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        color: this.chartColor,
        series: oParams.series,
      };
      //this.initChart("dealChart", option);
      this.initChart(id, option);
    },

    // 生成饼图
    initPieChart(oParams, id) {
      let options = {
        tooltip: {
          trigger: "item",
          formatter:'{b0}: {c0}%'
        },
        legend: {
          // orient: "horizontal",
          // right: "0",
          // top: "middle",
        },
        series: [
          {
            type: "pie",
            radius: oParams.radius || "50%",
            label: {
              normal: {
                position: "inside",
                show: true,
                formatter: "{d}%",
              },
            },
            data: oParams.data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
        color: this.chartColor,
      };
      this.initChart(id, options);
    },

    // 处理折线图数据
    initChartData(obj, type) {
      if (!obj) {
        return "";
      }
      let options = {};
      let _names = [];
      let _arr = [];
      obj.series.map((k) => {
        let m = []
        let o = {
          type: type || "line",
          smooth: true,
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          barWidth:obj.barWidth
        };
        k.data.map(j => {
          j = j?Number(j.toFixed(0)):j;
          m.push(j)
        })
        o.name = k.name;
        o.data = m
        _arr.push(o);
        _names.push(k.name);
      });

      options.legend = _names;
      options.series = _arr;
      options.xaxis = obj.xaxis;
      return options;
    },

    // 处理饼图数据
    initPieData(obj) {
      let n = obj.series || [];
      let m = obj.xaxis || [];
      let arr = [];
      let options = {};
      let nm = n[0] ? n[0].data : [];
      for (var i = 0; i < m.length; i++) {
        let b = {};
        b.name = m[i];
        b.value = nm[i]?Number(nm[i]).toFixed(0):0;
        arr.push(b);
      }
      options.data = arr;
      return options;
    },

    // 获取业务总览
    getOverview() {
      GETBUSINESSOVERVIEW().then((res) => {
        let list = res.data || [];
        this.overViewInfo = list;
      });
    },

    // 获取成交情况
    getDealInfo() {
      let _this = this;
      let oParams = deepClone(_this.dealForm);
      GETBUSINESSDEALCHART(oParams).then((res) => {
        let obj = res.data;
        let options = _this.initChartData(obj);
        _this.initDealChart(options, "dealChart");
      });
    },

    // 获取成交客单价分布
    getDealPrice() {
      let _this = this;
      GETUNITPRICEDISTRIBUTION().then((res) => {
        let obj = res.data;
        let options = _this.initPieData(obj);
        _this.initPieChart(options, "dealPie");
      });
    },

    // 获取所有城市
    getCity() {
      GETCITYOPTIONS().then((res) => {
        this.cityList = res.data || [];
      });
    },

    // 获取转化率
    getConversion() {
      let _this = this;
      let oParams = deepClone(_this.rateForm);
      GETBUSINESSCONVERSION(oParams).then((res) => {
        let obj = res.data;
        let options = _this.initChartData(obj);
        options.formatter = '{a0}: {c0}%<br />{a1}: {c1}%'
        _this.initDealChart(options, "conversionChart");
      });
    },

    // 获取项目成交人数
    getDealProject() {
      let _this = this;
      GETDEALPROJECTDISTRIBUTION().then((res) => {
        let obj = res.data;
        let options = _this.initPieData(obj);
        options.radius = ["40%", "70%"];
        _this.initPieChart(options, "dealProjectPie");
      });
    },

    // 获取单个线索值
    getSingleClue() {
      let _this = this;
      let oParams = deepClone(_this.clueForm);
      GETSINGLECLUEOUTPUTVALUE(oParams).then((res) => {
        let obj = res.data;
        obj.barWidth = 50;
        let options = _this.initChartData(obj, "bar");
        console.log(options)
        options.boundaryGap = true;
        _this.initDealChart(options, "singleClueChart");
      });
    },

    // 获取客户成交年龄分布
    getCustomerAge() {
      let _this = this;
      GETCUSTOMERAGEDISTRIBUTION().then((res) => {
        let obj = res.data;
        let options = _this.initPieData(obj);
        _this.initPieChart(options, "dealCustomerAge");
      });
    },

    // 获取客户数据
    getCustomerInfo() {
      let _this = this;
      let oParams = deepClone(_this.userForm);
      GETCUSTOMERDATA(oParams).then((res) => {
        let obj = res.data;
        let options = _this.initChartData(obj);
        _this.initDealChart(options, "customerInfoChart");
      });
    },

    // 获取客户成交性别分布
    getCustomerSex() {
      let _this = this;
      GETCUSTOMERGENDERDISTRIBUTION().then((res) => {
        let obj = res.data;
        let options = _this.initPieData(obj);
        _this.initPieChart(options, "dealCustomerSex");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/style/sale.scss";
</style>
